<template>
  <div id="nav">
    <nav class="shop-nav" :style="{'background': `${colorSelected}`}">
      <div class="floor-main">
        <span> 首页 </span>
        <span> 商家档案 </span>
        <span v-for="(nav, index) in navLists" :key="index" v-if="nav.isOpen == 0">{{nav.navigationName}}</span>
        <w-button class="fr edit-btn" type="main" @on-click="showPopUp(true)">编辑</w-button>  
      </div>
    </nav>
    <div class="popup">
      <!-- 编辑导航弹框 -->
      <div id="edit-nav">
        <w-panel-fixed-wrap class="cb" title="导航颜色配置" width="678px" height="420px" 
          @on-confirm="closeWin" @on-cancel="hidePopup" v-model="showEditNav">
          <div class="color-container">
            <w-radio name="color-style" label="#f20685" v-model="color"><span class="red"></span></w-radio>
            <w-radio name="color-style" label="#333333" v-model="color"><span class="black"></span></w-radio>
            <w-radio name="color-style" label="#bbbbbb" v-model="color"><span class="grey"></span></w-radio>
          </div>
          <w-panel-title class="fill-content" title="关键词配置">
            <w-button type="main" @on-click="addNav()">添加</w-button>
          </w-panel-title>
          <div class="nav-list"> 首页 </div>
          <div class="nav-list"> 商家档案 </div>
          <div class="nav-list animated" :class="{slideOutLeft: (itemIndex == index)}" v-for="(nav, index) in navLists" :key="index"> 
            <!-- 导航列名称（不可编辑） -->
            <span v-text="nav.navigationName"></span>
            <!-- 操作按钮 -->
            <span class="operation">
              <span class="edit" @click="editNav(nav, index)">修改</span>
              <span v-if="index > 0" class="delete" @click="deleteNav(index, nav.id)">删除</span>
            </span>
          </div>
          <div class="tip">
            最多可以设置10个关键词
          </div>
        </w-panel-fixed-wrap>
      </div>
      <!-- 设置导航的关键词弹框 -->
      <div id="set-keyword">
        <w-panel-fixed-wrap class="cb" v-model="showEditKeyWord" title="设置关键字" width="1000px" 
          height="500px" @on-confirm="addNewNav" @on-cancel="hideEditKeyWord">
          <div class="search">
            关键字名称<w-input class="ml28" :validate="false" v-model="params.navigationName"></w-input>
          </div>
          <!-- 关联搜索组件 -->
          <associated-search :show-link="true" :tab-type="params.navigationType" :link="params.goodsDetailUrl" @on-input="getInputValue" @header="setNavigationType"></associated-search>
          <!-- 添加商品和已选商品选项框 -->
          <div class="add-exists-goods" v-if="!params.navigationType">
            <product-group :goods="goodsList" :products="params.goodsList" v-model="params.goodsIdList"></product-group>
          </div>
        </w-panel-fixed-wrap>
      </div>
      <!-- 设置导航的全部宝贝是否展示 -->
      <div id="set-all">
        <w-panel-fixed-wrap class="cb" v-model="showShowAllGoods" title="设置是否展示" width="675px" 
          height="214px" @on-confirm="handlerShowOrHideAllGoods" @on-cancel="hideEditKeyWord">
          <div class="choose">
            全部宝贝是否展示：
            <w-radio name="show-all" label="0" v-model="isShowAll"><span>是</span></w-radio>
            <w-radio name="show-all" label="1" v-model="isShowAll"><span>否</span></w-radio>
          </div>
        </w-panel-fixed-wrap>
      </div>
    </div>
  </div>
</template>

<script>
  // 商品组件
  import productGroup from './productGroup'

  // 关联商品搜索组件
  import associatedSearch from './associatedSearch'

  // 店铺PC装修的链接
  import { apiAdornPC } from '../../../common/api'

  // 导入检验的js
  import { validateNavParam, inSelectedGoodsList } from '../validate'

  export default {
    components: {
      productGroup,
      associatedSearch
    },
    data() {
      return {
        showEditNav: false,
        showEditKeyWord: false,
        showShowAllGoods: false,
        itemIndex: -1,
        wordType: 'goods',
        navLists: [],
        goodsList: [],
        color: '',
        colorSelected: '',
        isShowAll: 0,
        params: {
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          navigationName: '',
          navigationType: 0,
          goodsIdList: '',
          goodsDetailUrl: ''
        }
      }
    },
    created() {
      // 获取导航列表数据
      this.handlerNavList()
    },
    methods: {
      /**
       * 设置类型
       */
      setNavigationType(value) {
        this.params.navigationType = 1

        // 如果当前是商品
        if (value == 'goods') {
          this.params.navigationType = 0
        }
      },

      /**
       * 获取导航列表
       */
      handlerNavList() {
        apiAdornPC.getNavigationList(this.$store.getters.token).then((data) => {
          // 保存导航列表
          this.navLists = (data.list || [])
          // 如果有颜色，则取出来
          if (this.navLists && this.navLists.length > 0) {
            this.colorSelected = this.navLists[0].colorStyle
            this.color = this.navLists[0].colorStyle
            // 取出全部宝贝的是否展示
            this.isShowAll = this.navLists[2] ? this.navLists[2].isOpen : false
          }

          // 如果长度超过2，并且第一个第二个是首页和商家档案
          if (this.navLists.length >= 2) {
            // 第一个是首页的，先干掉
            if (this.navLists[0].navigationName == '首页') {
              this.navLists.splice(0, 1)
            }

            // 第二个是商家档案的，也干掉（第一个被干掉了，第二个变成第一个了）
            if (this.navLists[0].navigationName == '商家档案') {
              this.navLists.splice(0, 1)
            }
          }
        })
      },

      /**
       * 展示弹框
       */
      showPopUp() {
        // 展示弹框
        this.showEditNav = true
      },

      /**
       * 展示弹框
       */
      hidePopup() {
        // 展示弹框
        this.showEditNav = false
      },

      /**
       * 新增一个导航列项
       */
      addNav() {
        // 如果导航长度为9
        if (this.navLists.length > 9) {
          this.$toast('最多只可以设置10个关键词')
          return
        }

        // 隐藏编辑导航弹框
        this.showEditNav = false

        // 展示设置关键词弹框
        this.showEditKeyWord = true

        // 设置参数
        this.params = {
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          navigationName: '',
          navigationType: 0,
          goodsIdList: '',
          goodsDetailUrl: '',
          isEdit: false
        }
      },

      /**
       * 隐藏编辑关键词，展示新增导航菜单
       */
      hideEditKeyWord() {
        // 设置将搜索过的商品列表清空
        this.goodsList = []

        // 展示编辑导航弹框
        this.showEditNav = true

        // 隐藏设置关键词弹框
        this.showEditKeyWord = false
      },

      /**
       * 删除导航列项（删除女装等）
       *
       * @params { Integer } index 当前操作的列项索引
       * @params { Integer } navId 导航id
       */
      deleteNav(index, navId) {
        this.$modal({
          title: '删除',
          content: '是否删除此导航',
          onConfirm: () => {
            apiAdornPC.deleteNavigation(navId, this.$store.getters.token).then((data) => {
              // 删除动画效果
              this.itemIndex = index

              // 等动画执行完成，从数组中删除
              setTimeout(() => {
                this.itemIndex = -1
                this.navLists.splice(index, 1)
              }, 400)
            })
          }
        })
      },

      /**
       * 使导航列项可编辑
       *
       * @param { Object } nav   导航列项
       * @param { Number } index 当前第几个遍历项
       */
      editNav(nav, index) {
        // 如果当前是全部商品
        if (index == 0) {
          this.showAll()
          return
        }

        // 获取商品id
        let goodsId = []

        // 遍历所属的商品列表
        if (nav.goodsList && nav.goodsList.length > 0) {
          nav.goodsList.forEach((v) => {
            goodsId.push(v.goodsId)
          })
        }

        // 设置参数
        this.params = {
          accessToken: this.$store.getters.token,
          id: nav.id,
          decorationType: 'PC',
          navigationName: nav.navigationName,
          navigationType: nav.navigationType,
          goodsIdList: goodsId.join(','),
          goodsList: nav.goodsList || [],
          goodsDetailUrl: nav.goodsDetailUrl,
          isEdit: true
        }

        // 隐藏编辑导航弹框
        this.showEditNav = false

        // 展示设置关键词弹框
        this.showEditKeyWord = true
      },

      /**
       * 使导航列项不可编辑
       *
       * @param { Object } nav 导航列项
       */
      overEditNav(nav) {
        nav.isEdit = false
      },

      /**
       * 关闭窗体
       */
      closeWin() {
        // 如果颜色不存在
        if (!this.color) {
          // 不展示弹框
          this.showEditNav = false
          return
        }

        // 保存颜色
        apiAdornPC.saveColor(this.$store.getters.token, this.color).then(() => {
          // 加载数据
          this.handlerNavList()

          // 展示弹框
          this.showEditNav = false
        })
      },

      /**
       * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
       *
       * @param { String } value 搜索的参数
       */
      getInputValue(value) {
        // 如果当前是商品
        if (value.type == 'link') {
          this.params.navigationType = 1
          this.params.goodsDetailUrl = value.goodsLink
        }

        // 如果当前是按商品查询
        if (value.type == 'goods') {
          // 设置类型是链接
          this.params.navigationType = 0

          // 设置token
          value.accessToken = this.$store.getters.token

          // 先清空商品列表
          this.goodsList = []

          // 获取参数
          apiAdornPC.searchGoodsByParams(value).then((data) => {
            // 如果没有获取到商品列表
            if (!data.list || data.list.length == 0) {
              return
            }

            // 遍历数据
            data.list.forEach((v) => {
              // 如果当前商品不在已选列表中
              if (!inSelectedGoodsList(v, this.params.goodsList)) {
                this.goodsList.push(v)
              }
            })
          })
        }
      },

      /**
       * 添加新导航
       */
      addNewNav() {
        // 校验入参
        if (!validateNavParam(this.params)) {
          return
        }

        // 关键词是否存在
        let isExists = false

        // 校验关键词是否存在
        if (this.navLists && this.navLists.length > 0) {
          this.navLists.forEach((v) => {
            if (v.navigationName == this.params.navigationName && v.id != this.params.id) {
              this.$toast('该关键字已存在')
              isExists = true
              return
            }
          })
        }

        // 如果关键词存在，则抛出
        if (isExists) return

        // 如果当前是编辑
        if (this.params.isEdit) {
          // 请求数据
          apiAdornPC.editNavigation(this.params).then((data) => {
            // 重新加载数据
            this.handlerNavList()

            // 隐藏弹框
            this.hideEditKeyWord()
          })
          return
        }

        // 请求数据
        apiAdornPC.addNavigation(this.params).then((data) => {
          // 重新加载数据
          this.handlerNavList()

          // 隐藏弹框
          this.hideEditKeyWord()
        })
      },

      /**
       * 展示所有商品或隐藏
       */
      handlerShowOrHideAllGoods() {
        apiAdornPC.apiUpdateShowAllGoods(this.$store.getters.token, this.isShowAll, 'PC').then(v => {
          this.showShowAllGoods = false
          this.showEditNav = true
        })
      },

      // 展示是否全部显示宝贝弹窗
      showAll() {
        this.showShowAllGoods = true
        this.showEditNav = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './style.scss';

  .fill-content {
    margin: 0px -30px 10px -30px;
  }

  .color-container {
    height: 70px;
    line-height: 40px;

    .m-radio {
      margin-right: 40px;
    }

    span {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-bottom: -10px;

      &.red {
        background-color: #f20685;
      }
      &.black {
        background-color: #333333;
      }
      &.grey {
        background-color: #bbbbbb;
      }
    }
  }

  .choose {
    label {
      margin-left: 32px;
    }
  }
</style>